<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>个人中心</title>

    <div th:include="common :: commonheader"/>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common :: #leftmenu " ></div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="common :: headermenu" ></div>
        <!-- header section end-->

        <!-- page heading start-->
        <!--<div class="page-heading">-->
            <!--Page Tittle goes here-->
        <!--</div>-->
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">

            <div class="row">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="profile-pic text-center">
                                        <img alt="" th:src="@{/images/photos/user1.png}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <ul class="p-info">
                                        <li>
                                            <div class="title">姓名</div>
                                            <div class="desk" >[[${member.name}]]</div>
                                        </li>
                                        <li>
                                            <div class="title">手机号</div>
                                            <div class="desk">[[${member.phone}]]</div>
                                        </li>
                                        <li>
                                            <div class="title">邮箱</div>
                                            <div class="desk">[[${member.email}]]</div>
                                        </li>
                                        <li>
                                            <div class="title">城市</div>
                                            <div class="desk">[[${member.city}]]</div>
                                        </li>
                                        <li>
                                            <div class="title">账号状态</div>
                                            <div class="desk">[[${member.enableStr}]]</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body p-states">
                                    <div class="summary pull-left">
                                        <h4>Total <span>Sales</span></h4>
                                        <span>Monthly Summary</span>
                                        <h3>$ 5,600</h3>
                                    </div>
                                    <div id="expense" class="chart-bar"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body p-states green-box">
                                    <div class="summary pull-left">
                                        <h4>Product <span>refund</span></h4>
                                        <span>Monthly Summary</span>
                                        <h3>160</h3>
                                    </div>
                                    <div id="pro-refund" class="chart-bar"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body p-states">
                                    <div class="summary pull-left">
                                        <h4>Total <span>Earning</span></h4>
                                        <span>Monthly Summary</span>
                                        <h3>$ 51,2600</h3>
                                    </div>
                                    <div id="expense2" class="chart-bar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="profile-desk">
                                        <h1>[[${member.name}]]</h1>
                                        <span class="designation">PRODUCT DESIGNER (UX / UI / Visual Interaction)</span>
                                        <p>
                                            I have 10 years of experience designing for the web, and specialize in the areas of user interface design, interaction design, visual design and prototyping. I’ve worked with notable startups including Pearl Street Software.
                                        </p>
                                        <a class="btn p-follow-btn pull-left" th:href="@{#}"> <i class="fa fa-check"></i> Following</a>

                                        <ul class="p-social-link pull-right">
                                            <li>
                                                <a th:href="@{#}">
                                                    <i class="fa fa-facebook"></i>
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a th:href="@{#}">
                                                    <i class="fa fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a th:href="@{#}">
                                                    <i class="fa fa-google-plus"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <form>
                                    <textarea class="form-control input-lg p-text-area" rows="2" placeholder="Whats in your mind today?"></textarea>
                                </form>
                                <footer class="panel-footer">
                                    <button class="btn btn-post pull-right">Post</button>
                                    <ul class="nav nav-pills p-option">
                                        <li>
                                            <a th:href="@{#}"><i class="fa fa-user"></i></a>
                                        </li>
                                        <li>
                                            <a th:href="@{#}"><i class="fa fa-camera"></i></a>
                                        </li>
                                        <li>
                                            <a th:href="@{#}"><i class="fa  fa-location-arrow"></i></a>
                                        </li>
                                        <li>
                                            <a th:href="@{#}"><i class="fa fa-meh-o"></i></a>
                                        </li>
                                    </ul>
                                </footer>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <header class="panel-heading">
                                    recent activities
                                    <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                                </header>
                                <div class="panel-body">
                                    <ul class="activity-list">
                                        <li>
                                            <div class="avatar">
                                                <img th:src="@{/images/photos/user1.png}" alt=""/>
                                            </div>
                                            <div class="activity-desk">
                                                <h5><a th:href="@{#}">Jonathan Smith</a> <span>Uploaded 5 new photos</span></h5>
                                                <p class="text-muted">7 minutes ago near Alaska, USA</p>
                                                <div class="album">
                                                    <a th:href="@{#}">
                                                        <img alt="" th:src="@{/images/gallery/image1.jpg}">
                                                    </a>
                                                    <a th:href="@{#}">
                                                        <img alt="" th:src="@{/images/gallery/image2.jpg}">
                                                    </a>
                                                    <a th:href="@{#}">
                                                        <img alt="" th:src="@{/images/gallery/image3.jpg}">
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="avatar">
                                                <img th:src="@{/images/photos/user2.png}" alt=""/>
                                            </div>
                                            <div class="activity-desk">
                                                <h5><a th:href="@{#}">John Doe</a> <span>Completed the Sight visit.</span></h5>
                                                <p class="text-muted">2 minutes ago near Alaska, USA</p>
                                                <div class="location-map">
                                                    <div id="map-canvas"></div>
                                                </div>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="avatar">
                                                <img th:src="@{/images/photos/user3.png}" alt=""/>
                                            </div>
                                            <div class="activity-desk">

                                                <h5><a th:href="@{#}">Jonathan Smith</a> <span>attended a meeting with</span>
                                                    <a th:href="@{#}">John Doe.</a></h5>
                                                <p class="text-muted">2 days ago near Alaska, USA</p>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="avatar">
                                                <img th:src="@{/images/photos/user4.png}" alt=""/>
                                            </div>
                                            <div class="activity-desk">

                                                <h5><a th:href="@{#}">Jonathan Smith</a> <span>completed the task “wireframe design” within the dead line</span></h5>
                                                <p class="text-muted">4 days ago near Alaska, USA</p>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="avatar">
                                                <img th:src="@{/images/photos/user5.png}" alt=""/>
                                            </div>
                                            <div class="activity-desk">

                                                <h5><a th:href="@{#}">Jonathan Smith</a> <span>was absent office due to sickness</span></h5>
                                                <p class="text-muted">4 days ago near Alaska, USA</p>
                                            </div>
                                        </li>


                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer class="">
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>



<!--Sparkline Chart-->
<script th:src="@{/js/sparkline/jquery.sparkline.js}"></script>
<script th:src="@{/js/sparkline/sparkline-init.js}"></script>

<!--google map-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&AMP;sensor=false"></script>

<div th:include="common :: #commonscript" />

<script>

    //google map
    function initialize() {
        var myLatlng = new google.maps.LatLng(-37.815207, 144.963937);
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

</body>
</html>
